<template>
  <div style="background-color: #000;">
    <section class="content">
      <div class="container">
        <!-- 面包屑导航star -->
        <el-breadcrumb separator="/" class="breadCrumb_Box">
          <el-breadcrumb-item :to="{ path: '/detailInfoto' }">个人中心</el-breadcrumb-item>
          <el-breadcrumb-item>我的资料</el-breadcrumb-item>
          <el-breadcrumb-item>账号信息</el-breadcrumb-item>
          <el-breadcrumb-item>实名认证</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面包屑导航end -->
        <div class="bigbox" style="overflow: hidden">
          <div class="box" style="overflow: hidden">
            <stepOne></stepOne>
            <!-- <div class="text1">请点击认证按钮来实名认证 </div>
            <div class="text2">(我们会严格保证您填写的信息安全，请您们放心)</div>
            <div class="row" style="width: 100%; height: auto;">
              <div class="idbc col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="idbc_img"><img src="../../../../static/realName/manICO.png" alt=""></div>
                <div class="one">个人认证</div>
                <div class="tow">需要提供：姓名、身份证号、照片等</div>
                <div class="four">
                  <el-button class="five" style="background-color: #FFBC3D;"
                    @click="goUrl('/uploadUserId', 'uploadUserId')">
                    立即认证</el-button>
                </div>
              </div>
            </div>  -->
            <div class="know">
              <div class="know-entrance">
                <div class="know-img">
                  <img src="../../../../static/grrz.png" alt="" />
                  <p>个人认证</p>
                </div>

                <div class="know-text">
                  <h3><i class="el-icon-check"></i>请准备好身份证正反面</h3>
                  <h3 style="text-indent: 27px">预计<span>30分钟</span></h3>
                </div>

                <el-button class="know-button" @click="goUrl('/uploadUserId', 'uploadUserId')">立即认证<img
                    src="../../../../static/jt.png" alt="" /></el-button>

              </div>
              <!-- <div class="know-entrance">
                <div class="know-img">
                  <img src="../../../../static/qyrz.png" alt="" />
                  <p>企业认证</p>
                </div>
                <div class="know-text">
                  <h3><i class="el-icon-check"></i>请准备好公司营业执照</h3>
                  <h3><i class="el-icon-check"></i>请准备好法人身份证正反面</h3>
                  <h3 style="text-indent: 27px">
                    预计<span>1-3个工作日30分钟</span>
                  </h3>
                </div>
                <el-button class="know-button" @click="goUrl('/uploadEnterprise', 'uploadEnterprise')">企业认证<img
                    src="../../../../static/jt.png" alt="" /></el-button>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  import stepOne from "../../account/uploadID/stepOne.vue";
  export default {
    components: {
      stepOne,
    },
    data() {
      return {};
    },
    methods: {
      // 路由跳转
      goUrl(path, name) {
        this.$router.push({
          path: path,
          name: name,
        });
      },
    },
    created() {
      var token_time = sessionStorage["token_time"];
      token_time = parseInt(token_time);
      token_time = token_time + 3600000;
      var now = new Date().getTime();
      if (token_time < now || token_time == undefined || isNaN(token_time)) {
        console.log("未登录");
        this.hasLogin = false;

        //跳转到注册
        sessionStorage.setItem("currentTab_title", "");
        this.$router.push({
          path: "/register",
          name: "register",
        });

        return;
      }
    },
  };

</script>
<style scoped>
  .breadCrumb_Box {
    margin-top: 30px;
  }

  .box {
    margin-top: 80px;
  }

  .bigbox {
    width: 100%;
    height: 600px;
    margin-bottom: 30px;
    background-color: #0f0f0f;
    overflow: hidden;
    margin-top: 20px;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
  }

  .text1 {
    margin-top: 120px;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    text-align: center;
  }

  .text2 {
    width: 100%;
    font-size: 14px;
    font-weight: 300;
    color: #afadad;
    text-align: center;
    margin-top: 5px;
  }

  .idbc {
    width: 480px;
    height: 240px;
    margin: 0 auto 0;
    margin-top: 40px;
    background: url("../../../../static/realName/IDbg.png");
    position: relative;
  }

  .idbc_img {
    position: absolute;
    top: 40px;
    left: 60px;
  }

  .idbc_img img {
    width: 100px;
    height: 100px;
  }

  .one {
    position: absolute;
    text-align: left;
    top: 50px;
    left: 190px;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
  }

  .tow {
    position: absolute;
    text-align: left;
    top: 82px;
    left: 190px;
    font-size: 16px;
    color: #fff;
  }

  .three {
    position: absolute;
    text-align: left;
    top: 99px;
    left: 190px;
    font-size: 16px;
    color: #fff;
  }

  /* .four {
  position: absolute;
  text-align: left;
  top: 170px;
  left: 190px;
} */

  .el-button {
    /* width: 96px; */
    /* height: 30px !important; */
    /* font-size: 12px;
  line-height: 0;
  border: 0; */
    /* background-color: #ffbc3d; */
    /* color: #000000 !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important; */
    /* outline: none; */
  }

  .el-button:focus,
  .el-button:hover {
    /* color: #000000 !important; */
    border-color: none;
    background-color: none;
  }

  .el-button buton:focus {
    outline: none;
  }

  .know {
    margin-top: 120px;
    width: 100%;
    height: 380px;
    margin-bottom: 120px;
  }

  .know-entrance {
    height: 120px;
    border: 0px;
    background-color: #1d1d1d;
    width: calc(100% - 136px);
    margin: auto 68px;
    position: relative;
    margin-bottom: 30px;
  }

  .know-img {
    width: 120px;
    height: 100%;
    float: left;
    border-right: 0px;
    background-color: #343434;
  }

  .know-img img {
    margin: 18px 29px 5px 30px;
  }

  .know-img p {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #ccc;
  }

  .know-text {
    margin-left: 28px;
    float: left;
    height: 100%;
  }

  .know-text i {
    color: #fd7f3f;
    font-size: 19px;
    margin-right: 8px;
    line-height: 20px;
    font-weight: 600;
    position: relative;
    top: 3px;
  }

  .know-text h3 {
    color: #fff;
    font-size: 12px;
    margin-top: 15px;
    line-height: 18px;
  }

  .know-text h3 span {
    color: #fd7f3f;
  }

  .know-button {
    float: right;
    width: 120px;
    height: 40px;
    background-color: #fd7f3f;
    color: #ffe5d9;
    border-radius: 2px;
    border: 0px;
    text-align: center;
    line-height: 34px;
    font-size: 13px;
    margin-top: 45px;
    margin-right: 30px;
    padding: 0px;
  }

  @media screen and (max-width: 992px) {
    .box {
      margin-top: 20px;
    }

    .text1 {
      margin-top: 40px;
    }

    .idbc {
      margin-top: 30px;
      margin-bottom: 20px;
    }

    .bigbox {
      height: auto;
    }
  }

  @media screen and (max-width:677px) {
    .know {
      height: 500px;
    }

    .know-entrance {
      height: 240px;
    }

    .know-text {
      height: 80px;
    }

    .know-button {
      margin: auto;
      margin-top: 80px;
      margin-right: calc(50% - 100px);
    }
  }

  @media screen and (max-width:547px) {
    .know-img {
      display: none;
    }

    .know-button {
      float: none;
      margin-left: calc(50% - 60px);
    }
  }

  .breadCrumb_Box>>>.el-breadcrumb__item .is-link.el-breadcrumb__inner {
    color: #ee7829;
  }

  .breadCrumb_Box>>>.el-breadcrumb__item .el-breadcrumb__inner {
    color: #fff;
  }

</style>
